<template>
    <div class="use-car-info">
        <ul>
            <li>
                <p>行驶里程</p>
                <p><span v-text="useCarInfo.mileage">12.8</span> 公里</p>
            </li>
            <li>
                <p>用车时长</p>
                <p><span v-text="hourUseCar">1</span> 小时 <span v-text="minuteUseCar">20</span> 分钟</p>
            </li>
            <li>
                <p>用车计费</p>
                <p><span v-text="useCarInfo.totalAmount">30.1</span> 元</p>
            </li>
        </ul>
    </div>
</template>

<script>
import qs from "qs"
export default {
    props: {"useCarInfo": Object},
    mounted () {
        this.getHourAndMinute(this.useCarInfo.minute);
    },
    methods: {
        getHourAndMinute (minutes) {
            this.hourUseCar = parseInt(minutes/60);
            this.minuteUseCar = parseInt(minutes%60);
        }
    },
    data () {
        return {
            hourUseCar: "",
            minuteUseCar: "",
        }
    }
 }
</script>

<style scoped>
    .use-car-info ul {
        width: 100%;
        height: 140px;
        padding-top: 28px;

        display: flex;
        justify-content: space-around;

        background: #FFFFFF;
        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.05);
    }
    .use-car-info ul p {
        line-height: 37px;
        text-align: center;

        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #333;
        letter-spacing: 0;
    }
    .use-car-info ul p:last-of-type {
        line-height: 50px;
        margin-top: 7px;

        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #989A9C;
        letter-spacing: 0;
        line-height: 50px;
    }
    .use-car-info ul span {
        font-family: PingFangSC-Semibold;
        font-size: 36px;
        color: #0DB95F;
        letter-spacing: 0;
    }

</style>
